<!DOCTYPE html>
<html>

	<head lang="en">
		<title>找攻略</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
		<link rel="stylesheet" href="/css/reset.css"/>
		<link rel="stylesheet" href="/css/myStrategyComment.css"/>
		<script src="/js/plugins/jrender/jrender.min.js"></script>
		<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
		<script src="/js/plugins/dialog2/dialog.min.js"></script>
		<script src="/js/plugins/form/jquery.form.js"></script>
		<script src="/js/common.js"></script>
		<script>
            $(function () {
                var params = getParams();
				//获取标签内容
				$.get("/strategies/"+params.id+"/tags",{size:8},function (data) {
				    $.each(data,function (index,ele) {
                    	$("#tags").append('<label class="btn btn-outline-danger"><input type="checkbox" autocomplete="off" value="'+ele+'"> '+ele+'</label>')
                    })
                });





                var num;//用于存储星星数
                //星星点击事件
                $(".star i").click(function () {
                    num = $(this).data("num");
                    //获取所有的星星标签
					var children =$(".star i");
					//清除所有的实心样式
                    $(children).removeClass('fa-star').addClass('fa-star-o');

                    for(var i=0;i <num;i++){
                     	$(children[i]).removeClass('fa-star-o').addClass('fa-star')
					}
                });


                var rect;//用于存储当前点击的矩形框
                //上传图片
				$(".rect").click(function () {
				    rect=$(this);
					$("#file").click();
                });
				$("#file").change(function () {
                    if ($(this).val()) {
                        $("#fileForm").ajaxSubmit(function (data) {
                            rect.html('<img src="'+data.url+'"/>');
                        })
                    }
                });


                jQuery.ajaxSettings.traditional = true;//禁用一切[]
                //添加某个攻略的评论
				$("#submitBtn").click(function () {

                    var content = $("[name='content']").val();

                    //图片拼接
                    var imgs= $(".imgs img")//获取所有的img文件
					var imgUrls="";
					for(var i = 0; i<imgs.length;i++){
					    //获取图片源文件内容
                        imgUrls += $(imgs[i]).attr('src')+";";
					}

					//获取系统推荐的标签,由于标签具有多个,所以我们需要用一个数组将其给封装起来
					var tagsInput = $("label.active").children();//获取所有lable的子节点中的带有active的值
					var tagArr =[];//定义一个数组用于封装标签
                    var i =0;//tagsArr的索引
					for(;i<tagsInput.length;i++){
					    tagArr[i]=$(tagsInput[i]).val();
                    }

                    //获取自定义标签
					var myTags=$("input[name='myTags']").val();
					var myTagsArr = myTags.split(" ");
                    console.log(myTagsArr);
                    for(var j=0;j<myTagsArr.length;j++){
                        if(myTagsArr[j]!=""){
                            tagArr[i] = myTagsArr[j];
                       		 i++;
                        }
                    }
                    console.log(tagArr);



                    //注:用户id根据从当前用户登录中的信息获取
                    var comment ={
                        starNum:num,
                        content:content,
						imgUrls:imgUrls,
						tags:tagArr


                    };
				    //由于表单提交的内容太少了,所以我们通过自定义一个json对象,将我们的要提交的数据进行封装到这个对象当中
					$.post("/strategies/"+params.id+"/comments",comment,function (data) {
						if(data.success){
						    //跳转到我们刚刚查询的攻略页面
						    window.location.href="/strategyCatalogs.html?id="+params.id;
						}
                    })
                })
            })
		</script>
	</head>

	<body>

	<div class="search-head">
		<div class="row nav-search">
			<div class="col">
				<a href="javascript:window.history.go(-1)">
					<span><i class="fa fa-chevron-left" ></i></span>
				</a>

			</div>
			<div class="col">
				<span>点评</span>
			</div>
			<div class="col"></div>
		</div>
	</div>

	<div class="comment">
		<div class="container star">
			<p>你对该旅游地的评价</p>
			<i class="fa fa-star-o fa-lg" data-num="1"></i>
			<i class="fa fa-star-o fa-lg" data-num="2"></i>
			<i class="fa fa-star-o fa-lg" data-num="3"></i>
			<i class="fa fa-star-o fa-lg" data-num="4"></i>
			<i class="fa fa-star-o fa-lg" data-num="5"></i>
		</div>
		<hr />
		<div class="container tag">
			<p>请为该旅游地选择合适的标签（大家都在评）</p>
			<div class="btn-group-toggle" data-toggle="buttons" id="tags">

			</div>

			<p>添加你自己的标签</p>
			<input name="myTags" class="form-control"  placeholder="请使用空格隔开标签，每个标签不超8个字"   />

			<p>更多评价内容</p>
			<textarea name="content" class="form-control" rows="5" placeholder="请填写你对该旅游地的评价"></textarea>
		</div>
		<div class="container imgs ">
			<form id="fileForm" action="/images" method="post" enctype="multipart/form-data">
				<input type="file" id="file" name="file" style="display: none"/>
			</form>
			<p>上传图片</p>

			<div class="row">
				<div class="col-3 rect">
					<span>上传</span>
				</div>
				<div class="col-3 rect">
					<span>上传</span>
				</div>
				<div class="col-3 rect">
					<span>上传</span>
				</div>
				<div class="col-3 rect">
					<span>上传</span>
				</div>
				<div class="col-3 rect">
					<span>上传</span>
				</div>
			</div>
		</div>

	</div>



	<div class="operation">
		<button class="btn" onclick="window.history.go(-1)">放弃评价</button>
		<button class="btn" id="submitBtn">提交评价</button>
	</div>





	</body>


</html>